<template>
	<el-dialog :model-value="visible" width="80%" title="生成领料单" @close="handleClose">
		<el-table ref="table" :data="localMaterial" style="width: 100%" row-key="id" border
							:header-cell-style="{ background: '#eee', color: '#333' }">
			<el-table-column label="物料名称" prop="materialName" min-width="200" show-overflow-tooltip align="center">
				<!--                <template #default="scope">-->
				<!--                    <span>{{ materialData.find(i => i.id === scope.row.putMaterialId)?.materialName }}</span>-->
				<!--                </template>--> </el-table-column>
			<!--      <el-table-column label="物料类型" prop="materialType" min-width="200" show-overflow-tooltip align="center">-->
			<!--                <template #default="scope">-->
			<!--                    <span>{{ materialData.find(i => i.id === scope.row.putMaterialId)?.materialType }}</span>-->
			<!--                </template>-->
			<!--      </el-table-column>-->
			<el-table-column label="转换比" prop="numPutCompare" min-width="80" show-overflow-tooltip
											 align="center"></el-table-column>
			<!--            <el-table-column label="需求数量" prop="needNumber" min-width="80" show-overflow-tooltip align="center">-->
			<!--                <template #default="scope">-->
			<!--                    <el-input type="number" v-model="scope.row.needNumber"-->
			<!--                        @change="((e) => { needFind(e, scope.row) })"></el-input>-->
			<!--                </template>-->
			<!--            </el-table-column>-->
			<el-table-column label="物料总需求数量" prop="count" min-width="150" show-overflow-tooltip align="center" />
			<el-table-column label="已领数量" prop="alreadyMaterialCount" min-width="100" show-overflow-tooltip align="center" />
			<el-table-column label="本次领料数量" prop="currenNaterialCount" min-width="150" show-overflow-tooltip align="center">
				<template #default="scope">
					<el-input type="number" v-model="scope.row.currenNaterialCount"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="原材料库存数量" prop="storageCount" min-width="180" show-overflow-tooltip align="center" />
			<el-table-column label="工序总产出数量" prop="procedureCount" min-width="150" show-overflow-tooltip align="center" />
			<el-table-column label="计划产出产品数量" prop="planCount" min-width="150" show-overflow-tooltip align="center" />
			<!--      <el-table-column label="产出数量" prop="outputNumber" min-width="100" show-overflow-tooltip align="center">-->
			<!--        <template #default="scope">-->
			<!--          <span>{{ Number(scope.row.needNumber || 0) * Number(scope.row.numPutCompare || 0) }}</span>-->
			<!--        </template>-->
			<!--      </el-table-column>-->
			<el-table-column label="库位" prop="storageName" min-width="120" show-overflow-tooltip align="center">
			</el-table-column>
		</el-table>
		<template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { materialApi, basedataStorageApi } from '@/api/scheduling/dispatchManagement';

interface MaterialItem {
	id?: number;
	putMaterialId: number;
	numPutCompare: number;
	needNumber: number;
	storageId: number;
	materialName?: string;
	materialType?: string;
	storageName?: string;
}

interface MaterialDataItem {
	id: number;
	materialName: string;
	materialType: string;
}

interface StorageDataItem {
	id: number;
	storageName: string;
}

export default defineComponent({
	name: 'CreateOrUpdateModal',
	props: {
		visible: {
			type: Boolean,
			required: true
		},
		form: Object,
		handleAddSubmit: Function as () => void,
		material: Array as () => MaterialItem[],
		handleClose: Function as () => void
	},
	setup(props, { emit }) {
		const visibles = ref(props.visible);
		const materialData = ref<MaterialDataItem[]>([]);
		const storageData = ref<StorageDataItem[]>([]);
		const localMaterial = ref<MaterialItem[]>([...props.material]);


		// const needFind = (e: any, row: MaterialItem) => {
		//   const needData = localMaterial.value.map((item) => {
		//     if (item.putMaterialId === row.putMaterialId) {
		//       return {
		//         ...item,
		//         needNumber: e.target.value
		//       }
		//     }
		//     return item
		//   });
		//   // localMaterial.value = needData;
		//   console.log("needFind", e.target.value);
		// };

		const relevance = async () => {
			try {
				// 获取物料数据
				const materialRes = await materialApi();
				materialData.value = materialRes.data;

				// 获取存储数据
				const storageRes = await basedataStorageApi();
				storageData.value = storageRes.data;

				// 更新 material 数据
				localMaterial.value.forEach(item => {
					item.materialName = materialData.value.find(i => i.id === item.putMaterialId)?.materialName;
					item.materialType = materialData.value.find(i => i.id === item.putMaterialId)?.materialType;
					item.storageName = storageData.value.find(i => i.id === item.storageId)?.storageName;
				});

				console.log(localMaterial.value[0], 'material.value[0]', materialData.value);
			} catch (error) {
				console.error('Error fetching data:', error);
			}
		};

		const closeModal = () => {
			visibles.value = false;

		};

		const handleSubmit = () => {
			props.handleAddSubmit(localMaterial.value);
			// let hasError = false;
			// localMaterial.value.forEach(item => {
			//   if (!item.needNumber || item.needNumber <= 0) {
			//     ElMessage.error('需求数量是必填项，且必须大于0！');
			//     hasError = true;
			//     return;
			//   }
			// });
			//
			// if (!hasError) {
			//   props.handleAddSubmit(material.value);
			// }
		};

		//
		watch(() => props.material, (newValue) => {
			console.log(props.material, 'props.material');
			if (newValue) {
				localMaterial.value = props.material;
				// relevance();
			}
		});

		return {
			visibles,
			materialData,
			storageData,
			localMaterial,
			relevance,
			closeModal,
			handleSubmit
		};
	}
});
</script>
<style scoped>
</style>